<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
<body>
    <h2 class="ti">线性结构算法可视化</h2>
    <div class="box" id="app">
        <div class="title">
            <ul class="fa">
                <li  class="son pa"
                :class="{sonSel:curSel==i}"
                v-for="(it, i) in titleList"
                @click="curSel=i">
                    {{it}}
                </li>
            </ul>
        </div>
        <div class="miTitle">
            <ul class="innerMiTitle">
                <li class="item pa" 
                :class="{itemSel:curSelFun==i}"
                v-for="(it, i) in laTitleList"
                @click="curSelFun=i">
                    {{it}}
                </li>
            </ul>
        </div>
        <div class="cont cont1" v-show="curSel==0">
            <div class="btn">
                <ul>
                    <li>
                        <el-button size="mini">
                            初始化
                        </el-button>
                    </li>
                    <li>
                        <el-input class="inp" 
                        size="mini" 
                        v-model="inpEle"
                        @keydown.enter.native="push">
                        </el-input>
                        <el-button size="mini" 
                        @click="push">
                            插入
                        </el-button>
                    </li>
                    <li>
                        <el-input class="inp" 
                        v-model="delNum"
                        size="mini" 
                        @keydown.enter.native="delNumFun">
                        </el-input>
                        <el-button size="mini"
                        @click="delNumFun">
                            删除
                        </el-button>
                    </li>
                    <li>
                        <el-input class="inp" size="mini" v-model="findTarget"></el-input>
                        <el-popover
                            placement="bottom"
                            title="查找哪一个元素"
                            width="200"
                            trigger="manual"
                            :content="findResulCon"
                            v-model="showFinRes">
                            <el-button slot="reference" size="mini" @click="findElement">
                                查找
                            </el-button>
                        </el-popover>
                    </li>
                    <li>
                        <el-button size="mini" @click="clearArr">
                            置空
                        </el-button>
                    </li>
                </ul>
            </div>
            <div class="showBox lian" v-show="curSelFun==0">
                <div class="showNum">
                    <span>
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="linkLi fl" v-for="(it, i) in showArr" >
                            <div v-if="i"class="preLink fl">
                                <div class="tran fl"></div>
                                <div class="line fl"></div>
                            </div>
                            <el-button class="fl" type="danger" size="mini">
                                {{it.txt}}
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="showBox shun" v-show="curSelFun==1">
                <div class="showNum">
                    <span >
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="fl" v-for="(it, i) in showArr" >
                            <el-button type="danger" size="mini">
                                <el-dropdown @command="optElem">
                                    <span class="el-dropdown-link"
                                    v-show="it.flag" @click="editShow(i)">
                                      {{it.txt}}
                                    </span>

                                    <el-input type="text" v-model="it.txt"
                                    ref="itemInp"
                                    v-show="!it.flag"
                                    size="mini"
                                    class="itemInp"
                                    @blur.stop="save(i)">
                                    </el-input>

                                    <el-dropdown-menu slot="dropdown">
                                      <el-dropdown-item icon="el-icon-plus"
                                      :command="handleCommand('insert', i)">
                                        插入元素
                                      </el-dropdown-item>
                                      <el-dropdown-item icon="el-icon-minus"
                                      :command="handleCommand('del', i)"
                                      >
                                        删除元素
                                      </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cont cont2"v-show="curSel==1">
            <div class="btn">
                <ul>
                    <li>
                        <el-button size="mini">
                            初始化
                        </el-button>
                    </li>
                    <li>
                        <el-input class="inp" 
                        size="mini" 
                        v-model="inpEle"
                        @keydown.enter.native="push">
                        </el-input>
                        <el-button size="mini" 
                        @click="push">
                            push
                        </el-button>
                    </li>
                    <li>
                        <el-button size="mini"
                        @click="pop">
                            pop
                        </el-button>
                    </li>
                    <li>
                        <el-button size="mini" @click="clearArrStark">
                            置空
                        </el-button>
                    </li>
                </ul>
            </div>
            <div class="showBox lian" v-show="curSelFun==0">
                <div class="showNum">
                    <span>
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="linkLi fl" v-for="(it, i) in showArr" >
                            <div v-if="i"class="preLink fl">
                                <div class="tran fl"></div>
                                <div class="line fl"></div>
                            </div>
                            <el-button class="fl" type="danger" size="mini">
                                {{it.txt}}
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="showBox shun" v-show="curSelFun==1">
                <div class="showNum">
                    <span >
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="fl" v-for="(it, i) in showArr" >
                            <el-button type="danger" size="mini">
                                {{it.txt}}
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        <div class="cont cont3"v-show="curSel==2">
            <div class="btn">
                <ul>
                    <li>
                        <el-button size="mini">
                            init
                        </el-button>
                    </li>
                    <li>
                        <el-input class="inp" 
                        size="mini" 
                        v-model="inpEle"
                        @keydown.enter.native="push">
                        </el-input>
                        <el-button size="mini" 
                        @click="unshift">
                            入队
                        </el-button>
                    </li>
                    <li>
                        <el-button size="mini"
                        @click="shift">
                            出队
                        </el-button>
                    </li>
                    <li>
                        <el-button size="mini" @click="clearArrQue">
                            置空
                        </el-button>
                    </li>
                </ul>
            </div>
            <div class="showBox lian" v-show="curSelFun==0">
                <div class="showNum">
                    <span>
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="linkLi fl" v-for="(it, i) in showArr" >
                            <div v-if="i"class="preLink fl">
                                <div class="tran fl"></div>
                                <div class="line fl"></div>
                            </div>
                            <el-button class="fl" type="danger" size="mini">
                                {{it.txt}}
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="showBox shun" v-show="curSelFun==1">
                <div class="showNum">
                    <span >
                        当前数组长度
                        {{showArr.length}}
                    </span>
                </div>
                <div class="showList">
                    <ul>
                        <li class="fl" v-for="(it, i) in showArr" >
                            <el-button type="danger" size="mini">
                                {{it.txt}}
                            </el-button>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: () => {
        return {
            curSel: 0,
            curSelFun: 1,// 什么方式存储
            titleList: [
                '线性表', '栈', '队列'
            ],
            laTitleList: [
                '链式存储', '顺序存储'
            ],
            showArr: [{
                txt: 1,
                flag: 1
            }, {
                txt: 2,
                flag: 1
            }, {
                txt: 3,
                flag: 1
            }],
            inpEle: '',//插入数
            delNum: '',// 删除数
            showFinRes: false,// 查找结果是否显示
            isFind: 1,//是否找到元素 
            findTarget: 1,// 查找哪一个元素
        }
      },
      computed: {
        findResulCon() {
            if (this.isFind >= 0) return '找到元素！ ！！在第' + this.isFind + '位置上';
            return "没有该元素！ ！！";
        }
      },
      methods: {
        push() {
            if(!this.inpEle) return;
            this.showArr.push({
                txt: this.inpEle,
                flag: 1
            });
            this.inpEle = '';
        },
        unshift() {
            this.showArr.unshift({
                txt: this.inpEle,
                flag: 1
            })
        },
        shift() {
            this.showArr.shift();
        },
        pop() {
            this.showArr.pop();
        },
        delNumFun() {
            this.showArr = this.showArr.filter(it => {
                return it.txt != this.delNum;
            })
            console.log('del');
        },
        pop() {
            this.showArr.splice(this.showArr.length - 1, 1);
            console.log('pop');
        },
        editShow(i) {
            this.showArr[i].flag = !this.showArr[i].flag;
            console.log(this.$refs.itemInp[i].$refs.input);
            this.$refs.itemInp[i].focus();
        },
        save(i) {
        //    this.showArr[i].txt = this.$refs.itemInp.value;
            this.showArr[i].flag = !this.showArr[i].flag;
        },
        optElem(command) {
            let {i} = command;
            switch(command.txt) {
                case 'insert': {
                    this.showArr.splice(i, 0, {
                        txt: 'newElement',
                        flag: 1
                    })
                    break;
                };
                case 'del': {
                    this.showArr.splice(i, 1);
                    break;
                }
            }
            console.log(i);
        },
        handleCommand(txt, i) {
            return {
                txt, i
            };
        },
        clearArr() {
            this.showArr.splice(0, this.showArr.length);
        },
        clearArrStark() {
            let timer = setInterval(() => {
                if (!this.showArr.length) clearInterval(timer);
                this.pop();
            }, 200)
        },
        clearArrQue() {
            let timer = setInterval(() => {
                if (!this.showArr.length) clearInterval(timer);
                this.shift();
            }, 200)
        },
        findElement() {
            this.showFinRes = !this.showFinRes;
            this.showArr.forEach((it, i) => {
                console.log(i);
                if (it.txt == this.findTarget) {
                    this.isFind = i;
                }
            });
        }
      }
    })
  </script>
</html>